import React from 'react';
import {RNCamera} from 'react-native-camera';
import {Box, Button, Modal} from 'native-base';
import VideoPlayer from './videoPlayer';
import { useToast } from 'native-base';

const Record = props => {
  //data
  const [URL, setURL] = React.useState('');
  const [video, setVideo] = React.useState(false);
  const [showModal, setShowModal] = React.useState(false);
  const [isLoading,setIsLoading] = React.useState(false);
  const toast = useToast();
  //function
  async function startVideo() {
    const options = {quality: RNCamera.Constants.VideoQuality['720p']};
    const data = await this.camera.recordAsync(options);
    setURL(data.uri);
    setShowModal(true);
  }
  function stopVideo() {
    this.camera.stopRecording();
  }
  function updateVideo() {
    let name = '自由练习';
    if (props.route.params) name = props.route.params.name;
    const videoData = new FormData();
    videoData.append('photo', {
      uri: URL,
      type: 'video/webm', // 根据文件类型设置正确的 MIME 类型
      name: URL.slice(52), // 设置文件名
    });
    videoData.append('name', name);
    fetch('http://192.168.100.101:3000/upload', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
        Host: '192.168.0.10:3000',
      },
      body: videoData,
    })
      .then(response => response.json())
      .then(data => {
        if(data.result=='上传成功')
        {
          setIsLoading(false);
          setShowModal(false);
          props.navigation.navigate('Summary',{URL});
        }
      })
      .catch(error => {
        setIsLoading(false);
        toast.show({
         description: '上传失败',
        }),
        console.log(error)
      });
  }
  //render
  return (
    <Box flex={1}>
      <RNCamera
        ref={ref => {
          this.camera = ref;
        }}
        style={{flex: 1}}
        useNativeZoom //手动缩放
      ></RNCamera>
      <Button
        style={{position: 'absolute', bottom: 0, left: '35%', width: '30%'}}
        colorScheme="red"
        onPress={() => {
          if (video) {
            stopVideo();
            setVideo(false);
          } else {
            startVideo();
            setVideo(true);
          }
        }}>
        {video ? '停止录制' : '开始录制'}
      </Button>
      <Modal isOpen={showModal}>
        <Modal.Content maxWidth="400px">
          <Modal.Body>
            <VideoPlayer src={URL} width={'100%'} height={150}></VideoPlayer>
            <Box
              style={{
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-around',
              }}>
              <Button
                isLoading={isLoading}
                style={{margin: 10}}
                colorScheme="red"
                onPress={() => {
                  setIsLoading(true)
                  updateVideo()
                }}>
                上传
              </Button>
              <Button
                variant="outline"
                style={{margin: 10}}
                colorScheme="red"
                onPress={() => {
                  setShowModal(false)
                }}>
                取消
              </Button>
            </Box>
          </Modal.Body>
        </Modal.Content>
      </Modal>
    </Box>
  );
};
export default Record;
